<template>
  <div class="Social">
    <router-view v-slot="{ Component }" v-show="!isShow">
      <transition name="fade" mode="out-in" appear>
        <component :is="Component" />
      </transition>
    </router-view>
    <div v-show="isShow">
      <div class="top">
        <div class="top-left">
          <el-button style="background-color: #f56c6c;" @click="backarchive">历史归档</el-button>
          <el-button style="background-color: #2752fb;" @click="goReport">202302报表</el-button>
        </div>
      </div>
      <div class="content">
        <Departcheck :bumendata="bumendata" :changesearch='changesearch' :Citys="Citys" />
      </div>
      <div class="bottom">
        <Socialtable :attendanceList="attendanceList" :handleCurrentChange="handleCurrentChange" :total="total" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Departcheck from "@/components/Social/Departcheck.vue";
import { getSocialTableList, addSocialTable, getCity } from "../api/Socialtable";
import Socialtable from "../components/Socialtable.vue";
import { ref, onMounted, watchEffect } from "vue";
import { useStore } from '@/stores/counter'
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()
const isShow = ref(false);
watchEffect(() => {
  if (route.path == '/home/social') {
    setTimeout(() => {
      isShow.value = true
    }, 600)
  } else {
    isShow.value = false

  }
})
const store = useStore()
//表格数据
const attendanceList = ref([]);
let total = ref(0);
//部门多选
const bumendata: any = ref([]);
//城市多选数据
let Citys: any = ref([])
onMounted(() => {
  render();
});
const render = () => {
  getSocialTableList(store.$state.SocialData).then((res) => {
    attendanceList.value = res.data.data.rows;
    total.value = res.data.data.total
  });
  //查询部门
  addSocialTable().then((res) => {
    bumendata.value = res.data.data;
  });
  //查询城市
  getCity().then(res => {
    Citys.value = res.data.data
  })
};
//多选搜索
const changesearch = () => {
  render();
}
//分页
const handleCurrentChange = (page: number) => {
  store.$state.SocialData.page = page
  render()
}
const goReport = () => {
  router.push('/home/social/Report?yearMonth=202302')
}
const backarchive = () => {
  router.push('/home/Social/archive')
}

</script>

<style scoped>
.Social {
  .el-button {
    border-radius: 0px;
    color: white;
  }
}

.top {
  width: 100%;
  background-color: #fff;
  padding: 20px;
  display: flex;
}

.top-left {
  width: 50%;
}

.t1 {
  padding: 20px;
}

.t2 {
  margin-right: 40px;
}

.top-right {
  width: 50%;
  display: flex;
  justify-content: space-between;
}

.content {
  width: 100%;
  margin-top: 10px;
  background-color: #fff;
  padding: 20px;
}

.content label {
  margin-left: 35px;
}

.s1 {
  margin-left: 80px;
}

.l1 {
  margin-left: 120px;
}

.bottom {
  width: 100%;
  background-color: #fff;
  padding: 20px;
  margin-top: 10px;
}

.example-pagination-block+.example-pagination-block {
  margin-top: 10px;
}

.example-pagination-block .example-demonstration {
  margin-bottom: 16px;
}
</style>
